import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import Z1 from "../component/Z1";

function Mai() {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [gender, setGender] = useState("男");
  const [birthYear, setBirthYear] = useState("1990");
  const [birthMonth, setBirthMonth] = useState("7");
  const [birthDay, setBirthDay] = useState("1");
  const [birthHour, setBirthHour] = useState("时辰未知");

  // 生成年份、月份、日期和时辰选项
  const years = Array.from({ length: 126 }, (_, i) => (1900 + i).toString());
  const months = Array.from({ length: 12 }, (_, i) => (i + 1).toString());
  const days = Array.from({ length: 31 }, (_, i) => (i + 1).toString());
  const hours = [
    "时辰未知",
    "00:00-00:59(子时)",
    "01:00-01:59(丑时)",
    "02:00-02:59(丑时)",
    "03:00-03:59(寅时)",
    "04:00-04:59(寅时)",
    "05:00-05:59(卯时)",
    "06:00-06:59(卯时)",
    "07:00-07:59(辰时)",
    "08:00-08:59(辰时)",
    "09:00-09:59(巳时)",
    "10:00-10:59(巳时)",
    "11:00-11:59(午时)",
    "12:00-12:59(午时)",
    "13:00-13:59(未时)",
    "14:00-14:59(未时)",
    "15:00-15:59(申时)",
    "16:00-16:59(申时)",
    "17:00-17:59(酉时)",
    "18:00-18:59(酉时)",
    "19:00-19:59(戌时)",
    "20:00-20:59(戌时)",
    "21:00-21:59(亥时)",
    "22:00-22:59(亥时)",
    "23:00-23:59(子时)",
  ];

  const handleButtonClick = () => {
    if (!name) {
      alert("请输入姓名！");
      return;
    }
    if (!birthYear || !birthMonth || !birthDay) {
      alert("请选择完整的生辰信息！");
      return;
    }
    navigate("/informTwo", {
      state: { name, gender, birthYear, birthMonth, birthDay, birthHour },
    });
  };

  return (
    <div>
      <div style={{ backgroundColor: "#f1c588", width: "600px", margin: "0 auto" }}>
        <div>
          <img
            src="https://img-fe.tengzhihh.com/image/0d8cded6adf1b36a960eb5dd1efeeafc-750x800.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>

        {/* 输入框区域 */}
        <div
          style={{
            backgroundColor: "#fff5e1",
            border: "4px solid #b22222",
            borderRadius: "10px",
            padding: "20px",
            margin: "20px 0",
            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
          }}
        >
          <div
            style={{
              backgroundColor: "#b22222",
              color: "#fff",
              fontSize: "24px",
              fontWeight: "bold",
              textAlign: "center",
              padding: "10px 0",
              borderRadius: "5px",
              marginBottom: "20px",
            }}
          >
            请输入个人信息
          </div>

          {/* 姓名 */}
          <div style={{ marginBottom: "20px" }}>
            <label
              style={{
                display: "block",
                fontSize: "18px",
                color: "#333",
                marginBottom: "10px",
              }}
            >
              姓名：
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="请输入姓名"
                style={{
                  width: "100%",
                  padding: "8px",
                  fontSize: "16px",
                  border: "1px solid #ccc",
                  borderRadius: "5px",
                }}
              />
            </label>
          </div>

          {/* 性别 */}
          <div style={{ marginBottom: "20px" }}>
            <label
              style={{
                display: "block",
                fontSize: "18px",
                color: "#333",
                marginBottom: "10px",
              }}
            >
              性别：
              <span
                style={{
                  margin: "0 10px",
                  padding: "5px 10px",
                  backgroundColor: gender === "男" ? "#ffaa00" : "#fff",
                  border: "1px solid #ccc",
                  borderRadius: "5px",
                  cursor: "pointer",
                }}
                onClick={() => setGender("男")}
              >
                男
              </span>
              <span
                style={{
                  padding: "5px 10px",
                  backgroundColor: gender === "女" ? "#ffaa00" : "#fff",
                  border: "1px solid #ccc",
                  borderRadius: "5px",
                  cursor: "pointer",
                }}
                onClick={() => setGender("女")}
              >
                女
              </span>
            </label>
          </div>

          {/* 生辰 */}
          <div style={{ marginBottom: "20px" }}>
            <label
              style={{
                display: "block",
                fontSize: "18px",
                color: "#333",
                marginBottom: "10px",
              }}
            >
              生辰：
              <div style={{ display: "flex", gap: "10px", marginBottom: "10px" }}>
                <select
                  value={birthYear}
                  onChange={(e) => setBirthYear(e.target.value)}
                  style={{
                    padding: "8px",
                    fontSize: "16px",
                    border: "1px solid #ccc",
                    borderRadius: "5px",
                    flex: 1,
                  }}
                >
                  {years.map((year) => (
                    <option key={year} value={year}>
                      {year}
                    </option>
                  ))}
                </select>
                <select
                  value={birthMonth}
                  onChange={(e) => setBirthMonth(e.target.value)}
                  style={{
                    padding: "8px",
                    fontSize: "16px",
                    border: "1px solid #ccc",
                    borderRadius: "5px",
                    flex: 1,
                  }}
                >
                  {months.map((month) => (
                    <option key={month} value={month}>
                      {month}
                    </option>
                  ))}
                </select>
                <select
                  value={birthDay}
                  onChange={(e) => setBirthDay(e.target.value)}
                  style={{
                    padding: "8px",
                    fontSize: "16px",
                    border: "1px solid #ccc",
                    borderRadius: "5px",
                    flex: 1,
                  }}
                >
                  {days.map((day) => (
                    <option key={day} value={day}>
                      {day}
                    </option>
                  ))}
                </select>
              </div>
              <select
                value={birthHour}
                onChange={(e) => setBirthHour(e.target.value)}
                style={{
                  width: "100%",
                  padding: "8px",
                  fontSize: "16px",
                  border: "1px solid #ccc",
                  borderRadius: "5px",
                }}
              >
                {hours.map((hour) => (
                  <option key={hour} value={hour}>
                    {hour}
                  </option>
                ))}
              </select>
            </label>
          </div>
        </div>

        {/* 跳转按钮图片 */}
        <div>
          <img
            src="https://zx.tengzhihh.com/tfmlllongnianyuncheng/static/btn.2d876b2a.png?x-oss-process=image/format,webp"
            alt="立即测算按钮"
            style={{ width: "100%", height: "auto", cursor: "pointer" }}
            onClick={handleButtonClick}
          />
        </div>

        <div>
          <img
            src="https://img-fe.tengzhihh.com/image/0332f02c6c3b45-664x389.png?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            src="https://img-fe.tengzhihh.com/image/3a66c36e285d14-750x1011.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            src="https://fe-img.tengzhihh.com/image/68e10d40f60c12c0836b966371679e0f-750x483.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            src="https://fe-img.tengzhihh.com/image/c8dcc6f38708777059ae5454c381a9c8-750x647.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            src="https://img-fe.tengzhihh.com/image/d6133d990e7137-750x546.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            src="https://fe-img.tengzhihh.com/image/56002711cc7ec2a1716df0f179bfd937-750x705.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            src="https://img-fe.tengzhihh.com/image/154b416afdd8d5-750x681.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            src="https://img-fe.tengzhihh.com/image/e2f95058f92ac0-750x829.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <Z1 />
      </div>
    </div>
  );
}

export default Mai;